<template>
    <div class="minBox">
        <div class="minBox-top">
            <span>资源情况</span>
            <span class="title-right">详情</span>
        </div>
        <div class="bar">
            <div class="bar-left">
                <div class="bar-leftBox"></div>
                <div class="bar-rightBox"></div>
            </div>
            <div class="bar-right">
                <div class="bar-minBox"></div>
                <div class="bar-minBox"></div>
                <div class="bar-minBox"></div>
                <div class="bar-minBox"></div>
            </div>
        </div>
        <slot></slot>
    </div>
</template>
<script>
export default {

}
</script>

<style lang="scss" scoped>
.minBox {
    height: 100%;
    background-color: black;

    .minBox-top {
        height: 2.5rem;
        border: .125rem solid black;
        box-sizing: border-box;
        font-size: .9375rem;
        letter-spacing: .3125rem;
        // line-height: 2.0625rem;
        padding: .8125rem .625rem .5625rem 1.25rem;
        border-image: linear-gradient(to bottom, #0f102d, #0176ea) 1; //边框渐变
        background-image: linear-gradient(to bottom, #0f102d, #0d1e5e); //背景渐变
        box-shadow: 0 0 .3125rem#0176ea; //盒子阴影

        .title-right {
            float: right;
            color: #778ca9;
        }
    }

    .bar {
        display: flex;
        position: relative;
        margin-top: .1875rem;
        width: 100%;
        height: .1875rem;
        background-color: #0f102d;

        .bar-left {
            width: 6.25rem;
            height: .1875rem;
            display: flex;

            .bar-leftBox {
                width: 4.5625rem;
                margin-right: .375rem;
                height: 100%;
                background: linear-gradient(#ebffff, #00ebff)
            }

            .bar-rightBox {
                width: 1rem;
                height: 100%;
                background: linear-gradient(#00ffe4, #00ebff)
            }
        }

        .bar-right {
            height: 100%;
            position: absolute;
            display: flex;
            right: 0;
            top: 0;

            .bar-minBox {
                width: .375rem;
                height: 100%;
                margin-left: .25rem;
                background: linear-gradient(#00ffe3, #00ebff)
            }

            .bar-minBox:nth-child(2) {
                margin-right: .5rem
            }
        }
    }
}
</style>
